<template>
	<view class="container">
		<FeNavbar />
		<view class="page-title">修改用户名</view>
		<view class="from-wrap">
			<view class="input-row-item">
				<view class="input-item-title">新用户名</view>
				<view class="input-wrap">
					<image src="@/static/login/user.png" mode="aspectFill"></image>
					<view class="input-box">
						<input type="text" placeholder="请输入新用户名" maxlength="16" v-model="submitData.nickname"
							placeholder-class="placeholderClass" />
					</view>
				</view>
			</view>
			<view class="login-btn" @click="handleConfirm">确定</view>
		</view>
	</view>
</template>

<script>
	import {
		updateUsername
	} from "@/api/user.js"
	import {
		handleUpdateLocalAccount
	} from "@/common.js"
	export default {
		data() {
			return {
				submitData: {
					nickname: ""
				}
			};
		},
		methods: {
			async handleConfirm() {
				if (this.isEmpty(this.submitData.nickname)) {
					uni.showToast({
						title: "请输入新用户名",
						icon: "none"
					})
					return
				}
				uni.showLoading({
					title: "提交中..."
				})
				await updateUsername({
					userName: this.submitData.nickname
				});
				getApp().globalData.userInfo = {
					...getApp().globalData.userInfo,
					userName: this.submitData.nickname
				};

				handleUpdateLocalAccount({
					account_key: getApp().globalData.userInfo.email,
					fields_key: "userName",
					fields_value: this.submitData.nickname
				})

				uni.showToast({
					title: "修改成功",
				})
				setTimeout(() => {
					this.toBack();
				}, 2000)
			}
		}
	}
</script>

<style lang="scss" scoped>
	.container {
		.page-title {
			font-size: 50rpx;
			font-weight: 600;
			color: #26282B;
			line-height: 60rpx;
			padding: 32rpx 0 16rpx 32rpx;
		}

		.from-wrap {
			padding: 0 32rpx;

			.input-row-item {

				.input-item-title {
					font-size: 26rpx;
					color: #7B828A;
					margin: 32rpx 0 12rpx 0;
				}

				.input-wrap {
					height: 96rpx;
					background-color: #F4F5F7;
					border-radius: 12rpx;
					display: flex;
					align-items: center;

					image {
						width: 40rpx;
						height: 40rpx;
						margin: 0 28rpx;
					}

					.input-box {
						height: 100%;
						flex: 1;
						padding-right: 28rpx;
						color: #26282B;

						input {
							border: 0;
							width: 100%;
							height: 100%;
							font-size: 32rpx;
						}
					}

					.yzm-btn {
						width: 196rpx;
						height: 76rpx;
						line-height: 76rpx;
						font-size: 26rpx;
						font-family: PingFang SC-Medium, PingFang SC;
						font-weight: 500;
						color: #26282B;
						text-align: center;
						background-color: #FFE269;
						border-radius: 12rpx;
						margin-right: 10rpx;
					}

					.placeholderClass {
						color: #969696;
						font-size: 28rpx;
					}
				}
			}

			.login-btn {
				height: 92rpx;
				line-height: 92rpx;
				border-radius: 12rpx;
				background: #FFE269;
				display: block;
				text-align: center;
				font-size: 32rpx;
				font-weight: 600;
				color: #26282B;
				margin-top: 88rpx;
			}
		}
	}
</style>